<template>
  <div class="mb-2">
    <!-- <div style="line-height: 32px; padding: 0 12px;"> -->
    <v-row justify="space-between" no-gutters>
      <v-col cols="4" class="pr-1">
        <v-text-field
          label="X"
          outlined
          hide-details
          dense
          class="v-input--width-small"
          type="number"
          @change="moveTo('X', $event)"
          @click="showKeyboard(0)"
          :readonly="printerBusy"
          :value="(useGcodeCoords) ? gcodePosition[0].toFixed(2) : toolheadPosition[0].toFixed(2)"
        ></v-text-field>
      </v-col>
      <v-col cols="4" class="pr-1 pl-1">
        <v-text-field
          label="Y"
          outlined
          hide-details
          dense
          class="v-input--width-small"
          type="number"
          @change="moveTo('Y', $event)"
          @click="showKeyboard(1)"
          :readonly="printerBusy"
          :value="(useGcodeCoords) ? gcodePosition[1].toFixed(2) : toolheadPosition[1].toFixed(2)"
        ></v-text-field>
      </v-col>
      <v-col cols="4" class="pl-1">
        <v-text-field
          label="Z"
          outlined
          hide-details
          dense
          class="v-input--width-small"
          type="number"
          @change="moveTo('Z', $event)"
          @click="showKeyboard(2)"
          :readonly="printerBusy"
          :value="(useGcodeCoords) ? gcodePosition[2].toFixed(2) : toolheadPosition[2].toFixed(2)"
        ></v-text-field>
      </v-col>
    </v-row>

    <v-row justify="space-between" align="center" no-gutters v-show="printerPrinting">
      <v-col cols="auto" class="secondary--text text--lighten-1">
        {{ $t('app.general.label.requested_speed') }}
      </v-col>
      <v-col cols="auto" class="focus--text">
        {{ requestedSpeed }} mm/s
      </v-col>
    </v-row>

    <!-- </div> -->
    <AppNumberKeyboardDialog :number="keyboardValue" v-model="keyboard"
                             @change="keyboardChange"></AppNumberKeyboardDialog>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import StateMixin from '@/mixins/state'
import AppNumberKeyboardDialog from '@/components/ui/AppNumberKeyboardDialog.vue'

@Component({
  components: { AppNumberKeyboardDialog }
})
export default class ToolheadPosition extends Mixins(StateMixin) {
  keyboard = false
  keyboardValue = 0
  keyboardType = 0

  get gcodePosition () {
    return this.$store.state.printer.printer.gcode_move.gcode_position
  }

  get toolheadPosition () {
    return this.$store.state.printer.printer.toolhead.position
  }

  get useGcodeCoords () {
    return this.$store.state.config.uiSettings.general.useGcodeCoords
  }

  get requestedSpeed () {
    // Take into account the speed multiplier.
    const multiplier = this.$store.state.printer.printer.gcode_move.speed_factor || 1
    let speed = this.$store.state.printer.printer.gcode_move.speed || 0
    speed = (speed * multiplier) / 60
    return speed.toFixed()
  }

  moveTo (axis: string, pos: string) {
    const axisIndexMap: any = { X: 0, Y: 1, Z: 2 }
    const currentPos = (this.useGcodeCoords)
      ? this.gcodePosition[axisIndexMap[axis]]
      : this.toolheadPosition[axisIndexMap[axis]]
    if (parseInt(currentPos) !== parseInt(pos)) {
      const rate = this.$store.state.config.uiSettings.general.defaultToolheadXYSpeed
      this.sendGcode(`G90
        G1 ${axis}${pos} F${rate * 60}`)
    }
  }

  showKeyboard (type: number) {
    if (this.useGcodeCoords) {
      this.keyboardValue = this.gcodePosition[type]
    } else {
      this.keyboardValue = this.toolheadPosition[this.keyboardType]
    }
    this.keyboardType = type
    this.keyboard = true
  }

  keyboardChange (value: number) {
    switch (this.keyboardType) {
      case 0:
        this.moveTo('X', '' + value)
        break
      case 1:
        this.moveTo('Y', '' + value)
        break
      case 2:
        this.moveTo('Z', '' + value)
        break
    }
    if (this.useGcodeCoords) {
      this.gcodePosition[this.keyboardType] = value
    } else {
      this.toolheadPosition[this.keyboardType] = value
    }
  }
}
</script>

<style type="scss" scoped>
.coord-wrapper {
  line-height: 32px;
  padding: 0 12px;
}

/* .coord-col {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  max-height: 36px;
} */
</style>
